<template>
    <div id="app">

  <!-- 顶部导航 -->
    <van-nav-bar
        left-text="搜索"
        right-text="..."
        left-arrow
        @click-left="$router.push('/index/home')"
    />
    <div class="searchbox">
        <input type="text" placeholder="搜索商家、商品名称" v-model="searchText">
        <span @click="shopsearch">搜索</span>
    </div>
    <!-- 二级路由的占位标签 -->
    <router-view></router-view>
    </div>
</template>

<script>
import { mapState} from 'vuex'
import {shop_search} from '../utils/api'
export default {
    data(){
        return {
            searchText:"",
            searchlist:[],
        }
    },
    computed:{
        ...mapState(['searchArr']),
    },
    methods:{
        shopsearch(){
            if(this.searchText){    
            this.$store.commit('search',this.searchText);
            this.searchlist.push(this.searchText);

            shop_search({searchkey:this.searchText}).then((res)=>{
                this.$router.push('/search/result');
                this.$store.commit('render',res.data.list);
                // console.log(res.data.list);
                this.searchText = "";
            })
            // var listArr = this.searchArr;
            // var newListArr = [];
            // for( let item of listArr){
            //     if(newListArr.indexOf(item) === -1){
            //         newListArr.push(item);
            //     }
            // }
        }
    },
    
}
}
</script>

<style >
#app{
    height: 645px;
}
.searchbox{
    margin: 10px;
    display: flex;
    align-items: center;
}
.searchbox input {
    flex: 1;
    height: 40px;
    background-color: #fff;
    border: none;
    outline: none;
    border-radius: 20px;
    padding-left: 20px;
    box-shadow: 0 8px 12px #ebedf0;
}

.searchbox span {
    color: lightseagreen;
    font-weight: bolder;
    width: 60px;
    text-align: center;
}

</style>